<template>
	<div class="user">
		<div class="user_top">
			<p class="user_text right">
				<img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/xiaoxi.png">
				<img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/set.png" class="righ_user" @click="SetUp()">
			</p>
			<!--未登陆显示-->
			<div class="user_one_li clearfix" v-show="showname">
				<div class="user_login" @click="getLogin()">
					<button>登 录</button>
				</div>
			</div>
			<!--登陆后显示-->
			<div class="user_two_li" v-if="USERINFO" v-show="showLogin">
				<div class="user_two_top">
					<div class="user_two_div" @click="information()">
						<img :src="USERINFO.avatar ? USERINFO.avatar:'http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/bjpng.png'" class="user_two_img" />
					</div>
					<div class="user_two_top_div">
						<p class="user_two_top_p">
							<span>{{USERINFO.nickname}}</span>
							<img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/Agriculture_1.png" />
						</p>
						<p class="user_two_p">ID：{{USERINFO.userId}}</p>
					</div>
				</div>
				<div class="user_two_bottom">
					<ul>
						<li @click="toMoney">
							<p>零钱</p>
							<p>{{USERINFO.money}}</p>
						</li>
						<li @click="toIntegration">
							<p>积分</p>
							<p>{{USERINFO.integration}}</p>
						</li>
						<li @click="toSTC">
							<p>搜了贝</p>
							<p>{{USERINFO.stc}}</p>
						</li>
					</ul>
				</div>
			</div>
		</div>

		<!-- <div class="user-box1 base-sty">
			<ul>
				<li @click="linkOrder(1)">
					<div class="user-img"><img src="https://image.soole.com.cn/dfk.png" alt=""></div>
					<p>待付款</p>
				</li>
				<li @click="linkOrder(2)">
					<div class="user-img"><img src="https://image.soole.com.cn/dfh12.png" alt=""></div>
					<p>待发货</p>
				</li>
				<li @click="linkOrder(3)">
					<div class="user-img"><img src="https://image.soole.com.cn/dsh.png" alt=""></div>
					<p>待收货</p>
				</li>
				<li @click="linkOrder(4)">
					<div class="user-img"><img src="https://image.soole.com.cn/dpl.png" alt=""></div>
					<p>待评论</p>
				</li>
				<li @click="linkOrder(0)">
					<div class="user-img"><img src="https://image.soole.com.cn/qb.png" alt=""></div>
					<p>全部</p>
				</li>
			</ul>
		</div>
		<div class="user-box2 base-sty">
			<p class='title'>推广收益</p>
			<ul>
				<li>
					<div class="user-img"><img src="https://image.soole.com.cn/yhk.png" alt=""></div>
					<p>银行卡绑定</p>
				</li>
				<li>
					<div class="user-img"><img src="https://image.soole.com.cn/spfr.png" alt=""></div>
					<p>商户分润</p>
				</li>
				<li>
					<div class="user-img"><img src="https://image.soole.com.cn/xffr.png" alt=""></div>
					<p>消费分润</p>
				</li>
				<li>
					<div class="user-img"><img src="https://image.soole.com.cn/jcfr.png" alt=""></div>
					<p>寄存分润</p>
				</li>
			</ul>
		</div>
		<div class="fx-box base-sty">
			<div><img src="https://image.soole.com.cn/fxzc.png" alt=""></div>
			<div><img src="https://image.soole.com.cn/hyfx.png" alt=""></div>
		</div>
		<div class="user-box3 base-sty">
			<p class='title'>其他</p>
			<ul>
				<router-link tag="li" to="/Merchant">
					<div class="user-img"><img src="https://image.soole.com.cn/sjrz.png" alt=""></div>
					<p>商家入驻</p>
				</router-link>
				<router-link tag="li" to="/myRecommended">
					<div class="user-img"><img src="https://image.soole.com.cn/sprz.png" alt=""></div>
					<p>我的推荐</p>
				</router-link>
				<router-link tag="li" to="/Collection">
					<div class="user-img"><img src="https://image.soole.com.cn/wdsc.png" alt=""></div>
					<p>我的收藏</p>
				</router-link>
				<li>
					<div class="user-img"><img src="https://image.soole.com.cn/yjtj.png" alt=""></div>
					<p>业绩统计</p>
				</li>
			</ul>
		</div> -->

		
		<div class="user_foot">
			<ul class="user_ul">
				<li>
					<router-link to="/Collection">
						<div class="clea_side"><img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/user (1).png" class="fzf_con"></div>
						<div class="clea_cont">我的收藏</div>
					</router-link>
				</li>
				<li>
					<router-link to="/Merchant">
						<div class="clea_side"><img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/user (2).png" class="fzf_con"></div>
						<div class="clea_cont">商家入驻</div>
					</router-link>
				</li>
				<li>
					<router-link to="/myRecommended">
						<div class="clea_side"><img src="http://stnz.oss-cn-hangzhou.aliyuncs.com/img/user/money.png" class="fzf_con"></div>
						<div class="clea_cont">我的推荐</div>
					</router-link>
				</li>
			</ul>
		</div>
		<appFooter :active="1"></appFooter>
	</div>
</template>

<script>
	import appFooter from '@/components/appFooter.vue'
	export default {
		name: "user",
		data() {
			return {
				USERINFO: [],
				list: [],

				showname: true, //判断是否登陆
				showLogin: false, //判断是否登陆
				selected: '1',
			}
		},
		computed: {},
		components: {
			appFooter
		},
		methods: {
			//跳转登陆页面
			getLogin: function() {
				localStorage.setItem('beforeLoginUrl', "user");
				this.$router.push({
					path: '/login'
				})
			},
			//订单
			linkOrder(aiv){
				this.$router.push({path:'AllOrders',query:{aiv:aiv}})
			},
			SetUp: function() {
				this.$router.push({
					path: '/SetUp'
				})
			},
			AllOrders: function() {
				sessionStorage.setItem("userList", '');
				this.$router.push({
					path: '/AllOrders'
				})
			},
			toDetail(item) {
				sessionStorage.setItem("userList", item.id);
				this.$router.push({
					path: '/AllOrders'
				})
			},
			toRecord(item) {
				sessionStorage.setItem("userRecord", item.id);
				this.$router.push({
					path: '/MyRecord'
				})
			},
			toRecordAllOrders: function() {
				sessionStorage.setItem("userRecord", '');
				this.$router.push({
					path: '/MyRecord'
				})
			},
			information: function() {
				this.$router.push({
					path: '/edit'
				})
			},

			//获取用户信息
			async getUserInfo() {

				var list = JSON.parse(localStorage.getItem('userInfo') || '[]')
				this.list = list
				var userId = list.userId
				if (!userId) {
					this.showname = true
					this.showLogin = false
				} else {
					this.showname = false
					this.showLogin = true
					let params = {
						user_Id: userId
					};
					const res = await this.$axios.post(this.$api.userIndexData, params);
					if (res.success) {
						this.USERINFO = res.data
						if (this.USERINFO.OrderStatus.PendingPayment) {
							this.Orders[0].number = this.USERINFO.OrderStatus.PendingPayment
						}
						if (this.USERINFO.OrderStatus.PendingDelivery) {
							this.Orders[1].number = this.USERINFO.OrderStatus.PendingDelivery
						}
						if (this.USERINFO.OrderStatus.PendingGoodsReceived) {
							this.Orders[2].number = this.USERINFO.OrderStatus.PendingGoodsReceived
						}
						if (this.USERINFO.OrderStatus.ToBeEvaluated) {
							this.Orders[3].number = this.USERINFO.OrderStatus.ToBeEvaluated
						}
					} else {
						this.$toast(res.msg);
					}
				}
			},
			toMoney() {
				this.$router.push({
					path: '/changeDetail',
					query: {
						active: 0,
						userid: this.USERINFO.userId,
						money: this.USERINFO.money,
						integration: this.USERINFO.integration,
						stc: this.USERINFO.stc,
						lockSTC: this.USERINFO.lockSTC,
						unlockSTC: this.USERINFO.unlockSTC
					}
				})
			},
			toIntegration() {
				this.$router.push({
					path: '/changeDetail',
					query: {
						active: 1,
						userid: this.USERINFO.userId,
						money: this.USERINFO.money,
						integration: this.USERINFO.integration,
						stc: this.USERINFO.stc,
						lockSTC: this.USERINFO.lockSTC,
						unlockSTC: this.USERINFO.unlockSTC
					}
				})
			},
			toSTC() {
				this.$router.push({
					path: '/changeDetail',
					query: {
						active: 2,
						userid: this.USERINFO.userId,
						money: this.USERINFO.money,
						integration: this.USERINFO.integration,
						stc: this.USERINFO.stc,
						lockSTC: this.USERINFO.lockSTC,
						unlockSTC: this.USERINFO.unlockSTC
					}
				})
			},

		},
		mounted() {
			this.getUserInfo()
		},
		created: function() {
			setTitle('个人中心')
		}
	}
</script>

<style lang="less" scoped>
	@import '../../assets/css/index.css';

	.base-sty {
		background: #fff;
		width: 96%;
		margin: 16px auto;
		border-radius: 7px;
		min-height: 70px;
	}

	.ul-flex(@w) {
		ul {
			display: flex;
			justify-content: space-around;
			text-align: center;
			.user-img {
				height: 30px;
			}
			img {
				height: 100%;
				width: 30px
			}
			p {
				width: 100%;
				font-size: 12px;
				color: #484848;
				line-height: 30px;
			}
			li {
				width: @w;
			}
		}
	}
	
	// 盒子
	.user-box1{
	 padding-top: 10px;
	 padding-bottom: 5px;
		.ul-flex(19%);
	 }
	.user-box2,.user-box3{
		padding: 5px 0;
		.title{
			width: 94%;
			margin: 0 auto;
			color: #333333;
			font-size: 15px;
			line-height: 15px;
			padding: 10px 0;
			margin-bottom: 7px;
			border-bottom: 1px solid #F7F7F7;
			font-weight: 700;
		}
		.ul-flex(24%);
	}
	.fx-box{
		background: none;
		display: flex;
		justify-content: space-between;
		div{
			width: 49%;
			img{
				width: 100%;
			}
		}
	}
	
	
	.mint-navbar .mint-tab-item.is-selected {
		border-bottom: 3px solid #01bf47 !important;
		color: #01bf47;
		margin-bottom: 0;
	}

	.mint-navbar .mint-tab-item {
		padding: 10px 0;
		font-size: 15px;
	}

	.mint-navbar .mint-tab-item:nth-child(2) {
		padding: 17px 0 5px;
		font-size: 15px;
	}

	.title_p {
		font-size: 0.1rem;
		color: #8c8c8c;
		padding-top: 0.04rem;
		width: 2.1rem;
	}
</style>
